html,
body{
  width: 100%;
  height: 100%;
  overflow: hidden;

  #header,#footer,#sidebar,#main{
    position: absolute;
  }

  #header{
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
  }

  #footer{
    display: none;
  }

  $duration: 300ms;

  #sidebar{
    top: 60px;
    left: 0;
    width: 200px;
    bottom: 0;
    background: rgb( 222,222,222);
    transition-duration: $duration;

    .el-menu{
      width: 200px;
      transition-duration: $duration;
    }

    &[data-collapse=true]{
      width: 64px;

      &~#main{
        left: 64px;
      }

      .el-menu.el-menu--collapse{
        width: 64px;
      }
    }
  }

  #main{
    top: 60px;
    left: 200px;
    right: 0;
    bottom: 0;
    transition-duration: $duration;
  }
}
